import React,{useState} from 'react';
import {Space, Card, message, Upload } from 'antd'
import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
import type { GetProp, UploadProps } from 'antd';

import './index.less'
import request from "@/api";

type FileType = Parameters<GetProp<UploadProps, 'beforeUpload'>>[0];

const getBase64 = (img: FileType, callback: (url: string) => void) => {
    const reader = new FileReader();
    reader.addEventListener('load', () => callback(reader.result as string));
    reader.readAsDataURL(img);
};


function UploadPage() {
    const [loading, setLoading] = useState(false);
    const [fileList, setFileList] = useState([]);
    const [imageUrl, setImageUrl] = useState<string>();

    const beforeUpload = (file: FileType) => {
        const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
        if (!isJpgOrPng) {
            message.error('You can only upload JPG/PNG file!');
        }
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
            message.error('Image must smaller than 2MB!');
        }
        setFileList([file]);
        return isJpgOrPng && isLt2M;
    };

    const handleChange: UploadProps['onChange'] = (info) => {
        console.log('handleChange----',info,info.file.status)
        // getBase64(info.file.originFileObj as FileType, (url) => {
        //     setLoading(false);
        //     setImageUrl(url);
        //     console.log('url----',url)
        // });
    };

    const uploadImg = () => {
       console.log('imageUrl----',imageUrl,fileList)
       request.uploadFile({
           url:'/upload/imageData',
           data:{
             filename:fileList[0].name,
           },
           file:fileList,
       }).then(res=>{
           console.log('res----',res)
       }).catch(err=>{
           console.log('err-----',err)
       })
    }

    const uploadButton = (
        <button style={{ border: 0, background: 'none' }} type="button">
            {loading ? <LoadingOutlined /> : <PlusOutlined />}
            <div style={{ marginTop: 8 }}>Upload</div>
        </button>
    );
    return (
        <div className="uploadPage">
            <Space className="spaceArea">
                <Card>
                    <div className="cardTitle">图片上传</div>
                    <div className="cardCon">
                        <Upload
                            name="avatar"
                            listType="picture-card"
                            className="avatar-uploader"
                            showUploadList={false}
                            beforeUpload={beforeUpload}
                            onChange={handleChange}
                        >
                            {imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton}
                        </Upload>
                    </div>
                    <div className="uploadBtn" onClick={uploadImg}>上传</div>
                </Card>
                <Card>2</Card>
                <Card>3</Card>
                <Card>4</Card>
            </Space>
        </div>
    );
}

export default UploadPage;
